<template>
    <div class="w100 f-grow p20">
        <div class="f16 fw5 fam mb20 h-start-center">
            <div class="apply-item-icon mr15"></div>
            否决项审核
        </div>
        <a-form-model
            :model="form"
            ref="form"
            :rules="rules"
            :colon="false"
            class="m-form-model"
            labelAlign="left"
            layout="vertical"
        >
            <a-row :gutter="10" v-for="(item, index) in list" :key="index">
                <a-col :span="24" class="mb16">
                    <a-form-model-item :label="item.label" :prop="item.key">
                        <a-radio-group
                            v-if="item.formType === 'radio'"
                            :name="item.key"
                            v-model="form[item.key]"
                            :disabled="item.disabled"
                        >
                            <a-radio :value="2">是</a-radio>
                            <a-radio :value="1">否</a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-input
                        v-if="item.formType === 'input'"
                        autoComplete="off"
                        :placeholder="'请输入' + item.label"
                        v-model.trim="form[item.key]"
                        allowClear
                    />
                    <el-date-picker
                        size="small"
                        v-if="item.formType === 'year'"
                        v-model="form[item.key]"
                        type="year"
                        format="yyyy年"
                        value-format="yyyy"
                        placeholder="选择年"
                    ></el-date-picker>
                </a-col>
            </a-row>
        </a-form-model>
        <Footer
            @save="save"
            @back="back"
            :isShowSave="isShowSave"
            @previousStep="previousStep"
            @nextStep="nextStep"
            :isShowNext="true"
            :isShowPrevious="false"
        >
            <a-popconfirm v-if="isShowSave" title="请确认是否终止" ok-text="是" cancel-text="否" @confirm="openModal">
                <a-button type="danger" class="mr20">终止</a-button>
            </a-popconfirm>
        </Footer>
        <a-modal
            v-if="showModal"
            title=""
            :visible="true"
            width="40%"
            :footer="null"
            dialogClass="custom-modal"
            :maskClosable="false"
            @cancel="handleCancel"
        >
            <a-form-model
                :model="stopForm"
                ref="stopForm"
                :rules="stopRules"
                :colon="false"
                class="m-form-model"
                labelAlign="left"
                layout="vertical"
            >
                <a-row :gutter="10">
                    <a-col :span="24" class="mb16">
                        <a-form-model-item label="终止理由" prop="jsonRecord">
                            <a-checkbox-group v-model="stopForm.jsonRecord">
                                <a-row>
                                    <a-col
                                        :span="24"
                                        class="mb10"
                                        v-for="(checkItem, index) in stopCheckList"
                                        :key="index"
                                    >
                                        <a-checkbox :value="checkItem.value" name="type" style="color: #243144">
                                            {{ index + 1 + '.' + checkItem.label }}
                                        </a-checkbox>
                                    </a-col>
                                </a-row>
                            </a-checkbox-group>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24" class="mb16">
                        <a-form-model-item label="终止意见" prop="reason">
                            <a-textarea
                                autoComplete="off"
                                :placeholder="'请输入终止意见'"
                                v-model.trim="stopForm.reason"
                                allowClear
                            />
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
            <div class="h-end-center">
                <a-button class="mr20" @click="handleCancel">取消</a-button>
                <a-popconfirm title="请再次确认是否终止" ok-text="是" cancel-text="否" @confirm="stopReasonSubmit">
                    <a-button :loading="stopModalLoading" class="mr20" type="primary">确定</a-button>
                </a-popconfirm>
            </div>
        </a-modal>
    </div>
</template>

<script>
import mixin from './mixin'
import { stopCheckList } from '@/views/applyManage/config.js'
export default {
    props: {
        list: {
            type: Array,
        },
    },
    mixins: [mixin],
    data() {
        return {
            stopCheckList,

            stopModalLoading: false,
            showModal: false,
            stopForm: {
                jsonRecord: null,
                reason: null,
            },
            stopRules: {
                jsonRecord: [
                    {
                        required: true,
                        message: '请至少选择一条终止理由',
                    },
                ],
                reason: [
                    {
                        required: true,
                        message: '请输入终止理由',
                    },
                ],
            },
            form: {},
            rules: {},
        }
    },
    mounted() {
        setTimeout(() => {
            this.init()
            console.log(this.isShowSave)
        }, 1000)
    },
    methods: {
        async stopReasonSubmit() {
            this.$refs.stopForm.validate(async valid => {
                if (valid) {
                    this.stopModalLoading = true
                    let params = {
                        jsonRecord: JSON.stringify(this.stopForm),
                        reason: this.stopForm.reason,
                        type: 2, //类型(1退回2终止)
                        id: this.record.id,
                    }
                    try {
                        let res = await this.checkApi.stop(params)
                        if (res.code == 200) {
                            this.$message.success(res.message)
                            this.back()
                        }
                    } catch (e) {
                        console.log(e)
                    }
                    this.stopModalLoading = false

                    // if (this.saveApi instanceof Function) {
                    //     this.saveApi()
                    // }
                } else {
                    return false
                }
            })
        },
        init() {
            let form = {}
            const rules = {}
            if (this.record?.vetoItemJson) {
                form = JSON.parse(this.record.vetoItemJson)
            }
            this.list.forEach((item, index) => {
                form[item.key] = form[item.key]
                rules[item.key] = [
                    {
                        trigger: 'blur',
                        message: '该项未填写',
                        required: true,
                    },
                ]
            })
            this.form = form
            this.rules = rules
        },
        async saveApi() {
            this.Bus.$emit('loadingStateChange', true)

            try {
                let params = { vetoItemJson: JSON.stringify(this.form), id: this.record?.id }
                let res = await this.applyApi.notItem(params)
                if (res.code == 200) {
                    this.$message.success(res.message)
                }
            } catch (e) {
                console.log(e)
            }
            this.Bus.$emit('loadingStateChange', false)
        },
        openModal() {
            this.showModal = true
        },
        handleCancel() {
            this.showModal = false
        },
    },
}
</script>

<style lang="scss" scoped></style>
